import React, { Component } from 'react';
import ReactPullLoad, { STATS } from "react-pullload";
import {connect} from 'react-redux';
import { actions } from './_index.js';

class View extends Component {
    constructor(props){
        super(props);
        this.state={
            ajaxCfg:{
                url:'/home/mediareports',
                cfg:{
                    page_number:'1',
                    page_size:'10',
                },
                headers:{

                }
            },
            hasMore: true,
            action: STATS.init,
            index: 6,
            page:1
        }
    }
    handleAction = action => {
        // console.info(action, this.state.action, action === this.state.action);
        //new action must do not equel to old action
        if (action === this.state.action) {
            return false;
        }
        if (action === STATS.refreshing) {
            //刷新
            this.handRefreshing();
        } else if (action === STATS.loading) {
            //加载更多
            this.handLoadMore();
        } else {
            //DO NOT modify below code
            this.setState({
                action: action
            });
        }
    }
    handRefreshing = () => {
        if (STATS.refreshing === this.state.action) {
            return false;
        }

        setTimeout(() => {
        //refreshing complete
            this.setState({
                hasMore: true,
                action: STATS.refreshed,
                index: 6
            });
            // console.log('刷新');
            this.init();
        }, 3000);

        this.setState({
            action: STATS.refreshing
        });
    }
    handLoadMore = () => {
        const { down } = this.props;
        if (STATS.loading === this.state.action) {
            return false;
        }
        //无更多内容则不执行后面逻辑
        if (!this.state.hasMore) {
            return;
        }

        setTimeout(() => {
            if (this.state.index === 0) {
                this.setState({
                    action: STATS.reset,
                    hasMore: false
                });
            } else {
                this.setState({
                    action: STATS.reset,
                    index: this.state.index - 1
                });
            }
            console.log('加载更多');
            this.setState((state,props)=>{
                page:state.page++
            })
            this.getPddFn(this.state.page,down.pddApi.data)
        }, 3000);

        this.setState({
            action: STATS.loading
        });
    }
    init(){
        // 代码初始化
        this.getPddFn(1,[])
    }
    getPddFn(page,prevData){
        const { getPddFn } = this.props;
        const { ajaxCfg } = this.state;
        ajaxCfg.cfg.page_number = page;
        getPddFn('首次启用',ajaxCfg,prevData)
    }
    componentDidMount(){
        this.getPddFn(1,[])
    }
    lists(){
        const { down } = this.props;
        return down.pddApi.data.map((val,index)=>{
            return(
                <li key={val.id}>
                    {index}-----{val.main_title}
                </li>
            )
        })
    }
    render(){
        const { down } = this.props;
        const { hasMore } = this.state;
        // console.log(down)
        return(
            <React.Fragment>
                <ReactPullLoad
                  downEnough={150}
                  action={this.state.action}
                  handleAction={this.handleAction}
                  hasMore={hasMore}
                  distanceBottom={1000}
                >
                    <div className="div1">111</div>
                    <div className="div1">111</div>
                    <div className="div1">111</div>
                    <div className="div1">111</div>
                    <div className="div1">111</div>
                    <div className="div1">111</div>
                    <div className="div1">111</div>
                    {
                        down.pddApi
                        ?
                        <ul>{this.lists()}</ul>
                        :
                        ''
                    }
                </ReactPullLoad>
            </React.Fragment>
        )
    }
}
const mapStateToProps = (state)=> {
    return {
        down:state.downup
    }
}
const mapDispatchToProps = (dispatch, ownProps) => {
	return {
        getPddFn:(text,ajaxcfg,prevData)=>
        dispatch(actions.getFn(
            text,
            ajaxcfg,
            dispatch,
            prevData
        ))
	}
};

export default connect(mapStateToProps,mapDispatchToProps)(View);
